<script setup lang="ts">
import { ref, watch } from "vue";
import { useVModel } from "@vueuse/core";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";
import ChooseMaterialDialog from "@/components/ChooseMaterialDialog";
import { getOutboundQueryMaterialStock } from "@/api/outbound";

const systemStore = useSystemStoreWithOut();
const { materialTypeList } = storeToRefs(systemStore);

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  tableHeight: {
    type: Number,
    default: 0
  },
  preWarehouseCode: {
    type: [String, Number],
    default: ""
  }
});
const curRow = ref({});
const emits = defineEmits(["setTotalData"]);
const tableData = ref([]);

watch(
  () => props.list,
  (newVal: any) => {
    tableData.value = newVal;
  },
  { deep: true }
);

watch(
  tableData,
  (newVal: any) => {
    emits("setTotalData", newVal);
  },
  { deep: true }
);

watch(
  () => props.preWarehouseCode,
  (newVal: any, oldVal: any) => {
    if (!oldVal) return;
    tableData.value = [];
    curRow.value = {};
  }
);

const chooseMaterialDialogRef = ref(null);

const handleRowClick = (row: any) => {
  curRow.value = row;
};

// 添加物料
const addMaterial = (selections: any) => {
  const results = selections.map(val => {
    return {
      materialCode: val.materialCode,
      materialSpecsId: val.materialSpecsId,
      warehouseCode: props.preWarehouseCode
    };
  });
  getOutboundQueryMaterialStock(results).then(rsp => {
    tableData.value = rsp.data || [];
  });
};

const openChooseMaterialDialog = () => {
  chooseMaterialDialogRef.value.open();
};

// 清空表格数据
const clearTableData = () => {
  tableData.value = [];
};

defineExpose({
  getTableData: () => {
    return tableData.value;
  },
  openChooseMaterialDialog,
  clearTableData
});
</script>

<template>
  <div>
    <el-table
      class="tableBox"
      :data="tableData"
      style="width: 100%"
      :height="tableHeight"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" label="序号" min-width="80px" />
      <el-table-column
        prop="materialCode"
        label="物料编码"
        min-width="128px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="materialName"
        label="物料名称"
        min-width="120px"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料类型"
        prop="materialType"
        min-width="104px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-text>{{
            materialTypeList.find(
              val => val.dictLabelValue == scope.row.materialType
            )?.dictLabelName
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="materialSpecs"
        label="物料规格"
        min-width="200px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="unit"
        label="单位"
        min-width="80px"
        show-overflow-tooltip
      />
      <!-- 最大可入库数量后端接口未给到 -->
      <el-table-column
        prop="instockNum"
        label="当前可用库存"
        min-width="136px"
        show-overflow-tooltip
      />
    </el-table>
    <ChooseMaterialDialog ref="chooseMaterialDialogRef" @submit="addMaterial" />
  </div>
</template>
<style lang="scss" scoped>
.tableBox {
  .el-input {
    --el-input-width: 100% !important;
  }
}
</style>
